import React, { Component } from 'react';

import './App.css';
import { Container, Segment, Header, Icon, Input } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

class App extends Component {
  render() {
    return (
      <Container fluid>
        <Segment vertical inverted color='olive' className="segment0">
          <Header as='h2' color="orange">
            <Icon name='settings' />
            <Header.Content>
              Account Settings
              <Header.Subheader>
                Manage your preferences
              </Header.Subheader>
            </Header.Content>
          </Header>
        </Segment>
        <Segment vertical inverted color='orange' textAlign="center" className="segment1">
          <Input size='huge' fluid icon='search' placeholder='Search...' />
        </Segment>
        <div style={{height: '200em'}}></div>
      </Container>
    );
  }
}

export default App;
